import React, { useState, useRef, useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { selectImage } from '../../../store/image'; // 假设这是一个 Redux action creator
import { Watermark } from 'antd';
import Commentssss from './Comments/index'
import './index.css'
import type { PopoverProps } from 'antd';
import Headeroecf from './Headeroecf/index'
// 定义一个接口来描述图片数据
interface ImageData {
  src: string; // 图片的 URL
  x: number; // 图片的 x 轴位置
  y: number; // 图片的 y 轴位置
  width: number; // 图片的宽度
  height: number; // 图片的高度
}

const DropZone: React.FC = () => {

  // 管理当前区域内的图片数据
  const [images, setImages] = useState<ImageData[]>([]);
  // 选中的图片索引
  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
  // 是否正在拖拽图片
  const [isDragging, setIsDragging] = useState(false);
  // 拖拽开始时的位置
  const [dragStartPos, setDragStartPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
  // 上下文菜单的位置信息
  const [contextMenu, setContextMenu] = useState<{ top: number; left: number; index: number } | null>(null);
  // 参考 DOM 元素
  const dropZoneRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const dispatch = useDispatch(); // 用于 Redux 的 dispatch

  // 处理拖拽释放事件
  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault(); // 阻止默认行为
    const imgSrc = e.dataTransfer.getData('text'); // 获取拖拽的数据
    if (imgSrc) {
      const dropZoneRect = dropZoneRef.current?.getBoundingClientRect(); // 获取 DropZone 的矩形信息
      const newX = Math.max(0, Math.min(e.clientX - dropZoneRect!.left, dropZoneRect!.width)); // 新图片的 x 轴位置
      const newY = Math.max(0, Math.min(e.clientY - dropZoneRect!.top, dropZoneRect!.height)); // 新图片的 y 轴位置
      // 添加新图片到列表
      setImages((prevImages) => [
        ...prevImages,
        { src: imgSrc, x: newX, y: newY, width: 200, height: 100 },
      ]);
    }
  };

  // 处理拖拽经过事件
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault(); // 阻止默认行为
  };

  // 处理右键点击事件
  const handleRightClick = (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.preventDefault(); // 阻止默认行为（即浏览器自带的右键菜单）
    setSelectedImageIndex(index); // 设置当前选中的图片索引
    setContextMenu({ top: e.clientY, left: e.clientX, index }); // 设置上下文菜单的位置信息
  };

  // 开始拖拽图片
  const handleMouseDown = (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.preventDefault(); // 阻止默认行为
    const { clientX, clientY } = e; // 获取鼠标点击位置
    setDragStartPos({ x: clientX - images[index].x, y: clientY - images[index].y }); // 设置拖拽开始时的位置
    setSelectedImageIndex(index); // 设置当前选中的图片索引
    setIsDragging(true); // 设置拖拽状态为 true

    // 计算鼠标点击位置相对于图片左上角的偏移量
    const startX = e.clientX - images[index].x;
    const startY = e.clientY - images[index].y;

    // 鼠标移动时的处理
    const onMouseMove = (moveE: MouseEvent) => {
      const dropZoneRect = dropZoneRef.current?.getBoundingClientRect(); // 获取 DropZone 的矩形信息
      if (dropZoneRect) {
        const newX = Math.max(0, Math.min(moveE.clientX - startX - dropZoneRect.left, dropZoneRect.width - images[index].width)); // 新图片的 x 轴位置
        const newY = Math.max(0, Math.min(moveE.clientY - startY - dropZoneRect.top, dropZoneRect.height - images[index].height)); // 新图片的 y 轴位置
        setImages((prevImages) => // 更新图片位置
          prevImages.map((img, i) => (i === index ? { ...img, x: newX, y: newY } : img))
        );
      }
    };

    // 鼠标释放时的处理
    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove); // 移除鼠标移动监听器
      document.removeEventListener('mouseup', onMouseUp); // 移除鼠标释放监听器
    };

    document.addEventListener('mousemove', onMouseMove); // 添加鼠标移动监听器
    document.addEventListener('mouseup', onMouseUp); // 添加鼠标释放监听器
  };

  // 监听鼠标移动（用于拖拽）
  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return; // 如果没有拖拽则返回
    const { clientX, clientY } = e; // 获取鼠标当前位置
    const dropZoneRect = dropZoneRef.current?.getBoundingClientRect(); // 获取 DropZone 的矩形信息
    if (dropZoneRect) {
      setImages((prevImages) => { // 更新图片位置
        return prevImages.map((img, idx) => {
          if (idx === selectedImageIndex) {
            let newX = Math.min(Math.max(clientX - dragStartPos.x, 0), dropZoneRect.width - img.width); // 新图片的 x 轴位置
            let newY = Math.min(Math.max(clientY - dragStartPos.y, 0), dropZoneRect.height - img.height); // 新图片的 y 轴位置
            return { ...img, x: newX, y: newY };
          }
          return img;
        });
      });
    }
  };

  // 监听鼠标释放（用于拖拽）
  const handleMouseUp = () => {
    setIsDragging(false); // 设置拖拽状态为 false
  };

  // 开始调整图片大小
  const handleResizeStart = (index: number, resizeType: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'left' | 'right' | 'top' | 'bottom', e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.preventDefault(); // 阻止默认行为
    const startX = e.clientX; // 获取鼠标点击位置的 x 轴坐标
    const startY = e.clientY; // 获取鼠标点击位置的 y 轴坐标
    const startWidth = images[index].width; // 获取当前图片的宽度
    const startHeight = images[index].height; // 获取当前图片的高度
    const dropZoneRect = dropZoneRef.current?.getBoundingClientRect(); // 获取 DropZone 的矩形信息

    // 调整大小时的处理
    const resize = (moveE: MouseEvent) => {
      let newWidth = startWidth; // 新的宽度初始值
      let newHeight = startHeight; // 新的高度初始值
      switch (resizeType) { // 根据调整类型更新新的宽度和高度
        case 'topLeft':
          newWidth = startWidth + (startX - moveE.clientX);
          newHeight = startHeight + (startY - moveE.clientY);
          break;
        case 'topRight':
          newWidth = startWidth + (moveE.clientX - startX);
          newHeight = startHeight + (startY - moveE.clientY);
          break;
        case 'bottomLeft':
          newWidth = startWidth + (startX - moveE.clientX);
          newHeight = startHeight + (moveE.clientY - startY);
          break;
        case 'bottomRight':
          newWidth = startWidth + (moveE.clientX - startX);
          newHeight = startHeight + (moveE.clientY - startY);
          break;
        case 'left':
          newWidth = startWidth + (startX - moveE.clientX);
          break;
        case 'right':
          newWidth = startWidth + (moveE.clientX - startX);
          break;
        case 'top':
          newHeight = startHeight + (startY - moveE.clientY);
          break;
        case 'bottom':
          newHeight = startHeight + (moveE.clientY - startY);
          break;
      }

      const maxWidth = dropZoneRect!.width - images[index].x; // 最大宽度
      const maxHeight = dropZoneRect!.height - images[index].y; // 最大高度
      const clampedWidth = Math.max(10, Math.min(newWidth, maxWidth)); // 限制宽度范围
      const clampedHeight = Math.max(10, Math.min(newHeight, maxHeight)); // 限制高度范围

      setImages((prevImages) => // 更新图片大小
        prevImages.map((img, i) => (i === index ? { ...img, width: clampedWidth, height: clampedHeight } : img))
      );
    };

    // 结束调整大小时的处理
    const endResize = () => {
      document.removeEventListener('mousemove', resize); // 移除鼠标移动监听器
      document.removeEventListener('mouseup', endResize); // 移除鼠标释放监听器
    };

    document.addEventListener('mousemove', resize); // 添加鼠标移动监听器
    document.addEventListener('mouseup', endResize); // 添加鼠标释放监听器
  };

  // 删除图片
  const handleDeleteImage = (index: number) => {
    setImages((prevImages) => prevImages.filter((_, i) => i !== index)); // 从图片列表中移除指定索引的图片
    setContextMenu(null); // 清除上下文菜单
  };

  // 选择图片
  const handleClick = (event: React.MouseEvent<HTMLImageElement>) => {
    const clickedImageSrc = event.currentTarget.src; // 获取点击的图片的 URL
    dispatch(selectImage(clickedImageSrc)); // 使用 Redux 派发 action
  };

  // 使用 useEffect 监听拖拽状态的变化
  useEffect(() => {
    const cleanup = () => {
      document.removeEventListener('mousemove', handleMouseMove); // 移除鼠标移动监听器
      document.removeEventListener('mouseup', handleMouseUp); // 移除鼠标释放监听器
    };

    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove); // 添加鼠标移动监听器
      document.addEventListener('mouseup', handleMouseUp); // 添加鼠标释放监听器
    }

    return cleanup; // 清理监听器
  }, [isDragging]);

  const [widthData,setWidthData]=useState(380);
  const [heightData,setHeightData]=useState(620);
  const [shuiyin,setShuiyin]=useState('添加水印');
  const Ejia=()=>{
      setWidthData(widthData+10);
      setHeightData(heightData+10);
  }

  const Ejian=()=>{
      setWidthData(widthData-10);
      setHeightData(heightData-10);
  }

  const shuiyinQH=()=>{
    if(shuiyin=='添加水印'){
      setShuiyin("去除水印")
    }else{
      setShuiyin("添加水印")
    }
    
  }

 

  // 渲染组件
  return (
    <div
      ref={dropZoneRef}
      style={{
        // overflow: 'hidden',
        padding: '20px',
        width: `${widthData}px`,
        height: `${heightData}px`,
        margin: '5% auto',
        position: 'relative',
        background: '#fff',
        display: 'flex',
        flexWrap: 'wrap',
        gap: '10px',
      }}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
    >
      {/* <Headeroecf></Headeroecf> */}
      <div style={{position:'absolute',left:'-200px',top:'-30px'}}>
        <button style={{marginRight:'10px'}} onClick={Ejia}>画布放大</button>
        <button style={{marginRight:'10px'}} onClick={Ejian}>画布缩小</button>
        <button onClick={shuiyinQH}>{shuiyin}</button>
      </div>
{/* 评论 */}

      <div className='comments'>
        <Commentssss></Commentssss>
      </div>
          



      <div className={shuiyin=="添加水印"?'shuiyin':''} style={{position:'absolute',left:0,top:0,zIndex:'1000'}}>
        <Watermark content="一组">
    <div style={{ width:`${widthData}px`,height:`${heightData}px` }} />
  </Watermark>
      </div>
      {images.map((img, index) => ( // 显示每一张图片
        <div
          key={index}
          style={{
            position: 'absolute',
            left: `${img.x}px`,
            top: `${img.y}px`,
            width: `${img.width}px`,
            height: `${img.height}px`,
            cursor: selectedImageIndex === index ? 'grabbing' : 'grab',
            boxShadow: selectedImageIndex === index ? '0 0 10px 2px skyblue' : 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          onMouseDown={(e) => handleMouseDown(index, e)} // 开始拖拽
          onContextMenu={(e) => handleRightClick(index, e)} // 右键点击
        >
          <img
            src={img.src}
            alt=""
            style={{
              width: '100%',
              height: '100%',
            }}
            onClick={handleClick} // 点击图片
          />
          {selectedImageIndex === index && ( // 如果当前图片被选中
            <>
              {/* 调整图片大小的手柄 */}
              <div
                style={{
                  position: 'absolute',
                  top: '-5px',
                  left: '-5px',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'nwse-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'topLeft', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  top: '-5px',
                  right: '-5px',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'nesw-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'topRight', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  bottom: '-5px',
                  left: '-5px',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'nesw-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'bottomLeft', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  bottom: '-5px',
                  right: '-5px',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'nwse-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'bottomRight', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  top: '50%',
                  left: '-5px',
                  transform: 'translateY(-50%)',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'ew-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'left', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  top: '50%',
                  right: '-5px',
                  transform: 'translateY(-50%)',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'ew-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'right', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  top: '-5px',
                  left: '50%',
                  transform: 'translateX(-50%)',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'ns-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'top', e)} // 开始调整大小
              />
              <div
                style={{
                  position: 'absolute',
                  bottom: '-5px',
                  left: '50%',
                  transform: 'translateX(-50%)',
                  width: '5px',
                  height: '5px',
                  backgroundColor: 'skyblue',
                  cursor: 'ns-resize',
                  borderRadius: '25px'
                }}
                onMouseDown={(e) => handleResizeStart(index, 'bottom', e)} // 开始调整大小
              />
            </>
          )}
        </div>
      ))}
      {contextMenu && ( // 显示上下文菜单
        <div
          style={{
            position: 'fixed',
            top: contextMenu.top,
            left: contextMenu.left,
            backgroundColor: 'transparent',
            zIndex: 9999,
            padding: '5px',
          }}
        >
          <button onClick={() => handleDeleteImage(contextMenu.index)} style={{
            backgroundColor: 'orange',
            color: 'white',
            padding: '5px 10px',
            border: 'none',
            borderRadius: '5px',
          }}>删除</button>
        </div>
      )}
      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas> {/* 隐藏的 canvas 元素 */}
    </div>
  );
};

export default DropZone;
